<template>
	<view class="user">
		<view class="flex_row_c_c modalView" :class="qrShow ? 'show' : ''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px"><image :src="poster.finalPath" mode="widthFix" class="posterImage"></image></view>
				<view class="flex_row marginTop2vh">
					<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<button type="primary" size="mini" @tap.prevent.stop="copylink()">复制链接</button>
					<!-- <button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{ width: (poster.width || 0) + 'px', height: (poster.height || 0) + 'px' }"></canvas>
		</view>
		<view class="top">
			<view class="xinxi">
				<view class="left">
					<image src="../../static/images/tabbar/useractive.png"></image>
					<text>{{ userinfo.xingming }}</text>
				</view>
				<view class="right" @click="togonggao">
					<image src="../../static/images/icon/gonggao.png"></image>
					<text>公告</text>
				</view>
			</view>
			<view class="botoom">
				<view @click="toerweimalist">
					<image src="../../static/images/icon/erweima.png"></image>
					<view>我的收款</view>
				</view>
				<view @click="tocard">
					<image src="../../static/images/icon/card.png"></image>
					<view>我的银行卡</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" @click="tolishi">
				<view class="left"><text>历史订单</text></view>
				<view class="right"><image mode="widthFix" src="../../static/images/icon/you.png"></image></view>
			</view>
			<view class="list-item" @tap="shareFc()">
				<view class="left"><text>分享</text></view>
				<view class="right"><image mode="widthFix" src="../../static/images/icon/you.png"></image></view>
			</view>
			<view class="list-item" @tap="tokefu">
				<view class="left"><text>在线客服</text></view>
				<view class="right"><image mode="widthFix" src="../../static/images/icon/you.png"></image></view>
			</view>
			<view class="list-item" @tap="tozhinan">
				<view class="left"><text>新手指南</text></view>
				<view class="right"><image mode="widthFix" src="../../static/images/icon/you.png"></image></view>
			</view>
			<view class="list-item" @click="toset">
				<view class="left"><text>账号设置</text></view>
				<view class="right"><image mode="widthFix" src="../../static/images/icon/you.png"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
import _app from '@/util/QS-SharePoster/app.js';
import getSharePoster from '@/util/QS-SharePoster/QS-SharePoster.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			poster: {},
			qrShow: false,
			sharelink: '',
			canvasId: 'default_PosterCanvasId'
		};
	},

	methods: {
		tozhinan(){
			uni.navigateTo({
				url:'../usercon/zhinan/index'
			})
		},
		tokefu() {
			uni.navigateTo({
				url: '../usercon/kefu/index'
			});
		},
		toerweimalist() {
			uni.navigateTo({
				url: '../erweima/erweimalist/index'
			});
		},
		tocard() {
			uni.navigateTo({
				url: '../card/cardlist/index'
			});
		},
		togonggao() {
			uni.navigateTo({
				url: '../usercon/msg/index'
			});
		},
		tolishi() {
			uni.navigateTo({
				url: '../usercon/lishidingdan/index'
			});
		},
		toset() {
			uni.navigateTo({
				url: '../usercon/set/index'
			});
		},
		copylink() {
			uni.setClipboardData({
				data: this.sharelink,
				success: function() {
					console.log('success');
					uni.showToast({
						title: "链接复制成功",
						icon: 'none'
					});
				}
			});
		},
		async shareFc() {
			try {
				if (!this.poster.finalPath) {
					const d = await getSharePoster({
						type: 'testShareType',
						posterCanvasId: this.canvasId,

						textArray: ({ bgObj, type, bgScale }) => {
							const fontSize = bgObj.width * 0.040;
							const lineHeight = bgObj.height * 0.06;
							return [
								{
									text: '赶紧加入我们吧',
									size: fontSize,
									color: '#333333',
									lineheight: '1.6em',
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										_app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx: bgObj.width - textLength - fontSize,
											dy: bgObj.height - lineHeight * 3
										};
									}
								},
								{
									text: '让你在家或者上班之余都能轻松赚钱!',
									size: fontSize,
									color: '#333333',
									lineheight: '1.6em',
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										return {
											dx: bgObj.width - textLength - fontSize,
											dy: bgObj.height - lineHeight * 2
										};
									}
								},
								{
									text: '识别图中二维码，下载贝贝APP',
									size: fontSize,
									color: '#333333',
									alpha: 1,
									lineheight: '1.6em',
									textAlign: 'left',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										return {
											dx: bgObj.width - textLength - fontSize,
											dy: bgObj.height - lineHeight
										};
									}
								}
							];
						},
						qrCodeArray: ({ bgObj, type, bgScale }) => {
							return [
								{
									text: this.sharelink,
									size: bgObj.width * 0.2,
									dx: bgObj.width * 0.05,
									dy: bgObj.height - bgObj.width * 0.25
								}
							];
						},
						setCanvasWH: ({ bgObj, type, bgScale }) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
						},
						setDraw: ({ Context, bgObj, type, bgScale }) => {
							Context.setFillStyle('white');
							Context.setGlobalAlpha(0);
							Context.fillRect(0, bgObj.height - bgObj.height * 0.3, bgObj.width, bgObj.height * 0.2);
						}
					});
					console.log('海报生成成功， 临时路径: ' + d.poster.tempFilePath);
					this.poster.finalPath = d.poster.tempFilePath;
				}
				this.qrShow = true;
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
				console.log(JSON.stringify(e));
			}
		},
		saveImage() {
			// #ifndef H5
			console.log(this.poster.finalPath);
			uni.saveImageToPhotosAlbum({
				filePath: this.poster.finalPath,
				success(res) {
					_app.showToast('保存成功');
				}
			});
			// #endif
			// #ifdef H5
			_app.showToast('保存了');
			// #endif
		},
		share() {
			// #ifdef APP-PLUS
			_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
			// #endif

			// #ifndef APP-PLUS
			_app.showToast('分享了');
			// #endif
		},
		hideQr() {
			this.qrShow = false;
		}
	},
	onLoad() {
	var data = {
		token: uni.getStorageSync('token')
	};
	this.$store.dispatch('ploatformlist', data);	
	this.$store.dispatch('qrcodelist', data);
		this.sharelink = "http://mobile.suxin88.com:808/register?code=" +this.userinfo.invite_code;
	},
	computed: mapState({
		userinfo: 'userinfo'
	})
};
</script>

<style lang="scss" scoped src="./index.scss"></style>
